{extend name="extra@admin/content"}

{block name="content"}
<style>
.ibox-content{
    overflow-y: scroll;
    overflow-x: hidden;
    height: 500px;
}
</style>
<form onsubmit="return false;" action="__SELF__" data-auto="true" method="post" class='layui-form' style='padding-top:20px'>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">商品</label>
            <div class="layui-input-inline">
                <select name="goods_id" lay-verify="required" lay-search>
                <option value="">请选择</option>
                    {volist name='goods' id='v'}
                    <option value="{$v.goods_id}|{$v.id}">{$v.subject}</option>
                    {/volist}
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">原料</label>
            <div class="layui-input-inline">
                <select name="material_id[]" lay-verify="" lay-filter="test" lay-search >
                    <option value="">--请选择配料--</option>
                    {volist name='material' id='v'}
                    <option value="{$v.id}">{$v.name}/{$v.unit}</option>
                    {/volist}
                </select>
            </div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="num[]" required="required" placeholder="请输入用量" autocomplete="off" class="layui-input" value="">
            </div>
        </div>
    </div>  
    <div class="hr-line-dashed" id="add"></div>
    <div class="col-sm-4 col-sm-offset-2">
        <div class="layui-form-item text-center">
            <span class="layui-btn tianjiayihan" type="btn" onclick="tianjia();" >添加配料</span>
            <button class="layui-btn" type="submit" style="background:#ff5722;">保存配方</button>
        </div>
    </div>
    <script type="text/javascript">
    layui.use('form', function(){
        var form = layui.form;      //只有执行了这一步，部分表单元素才会自动修饰成功
        form.render();
    });
    function tianjia(){
        var ht = '<div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">原料</label><div class="layui-input-inline"><select name="material_id[]" lay-filter="test" lay-verify="required" lay-search ><option value="">--请选择配料--</option>{volist name="material" id="v1"}<option value="{$v1.id}">{$v1.name}/{$v.unit}</option>{/volist}</select></div><div class="layui-input-inline" style="width: 100px;"><input type="text" name="num[]" required="required" placeholder="请输入用量" autocomplete="off" class="layui-input"></div></div><span class="layui-btn tianjiayihan" type="btn" onclick="reduce(this);">移除</span></div>';
        var html = ht;
        // var html = '<div class="layui-form-item">'+ht+'</div>';
        $("#add").before(html);
        window.form.render('select'); //刷新select选择框渲染
    }
    function reduce(obj){
        $(obj).parent().remove();
    }
    var arr = new Array();          //定义数组
    window.form.on('select(test)', function(data){
        var num = 0;
        $( "select option:selected").each(function(da,i){
            if(da != 0){
                var s_val = $("select option:selected").eq(da).val();
                if(data.value == s_val){
                    num++;
                }
                if(num>=2){
                    layer.msg('添加原料重复，请去除重复的原料');
                    $('button').attr({"disabled":"disabled"});
                    $('button').css({"background":"#7d7673"});
                    return false;
                }else{
                    $('button').removeAttr("disabled");
                    $('button').css({"background":"#ff5722"});
                }
            }
        });
//        $( "select option:selected").each(function(da,i){
//            if(da !=0){
//                if($.inArray(da, arr)>0){
//                    layer.msg('添加原料重复，请去除重复原料');
//                    return false;
//                }else{
//                    arr.push($("select option:selected").eq(da).val());
//                }
//            }
//        });
        // var va = data.value;        //当前所选中的值
    });
    /**
     * 删除配方用料
     * @param  {[type]} obj [description]
     * @return {[type]}     [description]
     */
    function del(obj){
        var id = $(obj).attr('data-id');
        $.post('{:url("Recipe/del")}',
        {id:id},
        function(data){
            if(data.code == 1){
                $(obj).parent().parent().remove();
            }
        });
    }

</script>
</form>

{/block}